<template>
  <div id="app">
    <!-- 音频 -->
    <audio
      ref="audio"
      :src="audioUrl"
      @canplay="canplay"
      @ended="ended"
      @timeupdate="timeupdate"
    ></audio>

    <router-view></router-view>

    <Play :current-time="currentTime" :lyric="lyric"></Play>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Play from "./components/Play.vue";
export default {
  name: "App",

  components: {
    Play,
  },

  data() {
    return {
      //当前音频播放时间
      currentTime: 0,

      //当前音频歌词
      lyric: [],
    };
  },

  created() {
    this.$nextTick(() => {
      this.changeStateProperty({ key: "audioEle", value: this.$refs.audio });
    });

    //获取本地默认歌曲列表数据
    let localDefaultSongs = localStorage.getItem("defaultSongList");
    if (localDefaultSongs) {
      localDefaultSongs = JSON.parse(localDefaultSongs);
      this.changeStateProperty({
        key: "defaultSongList",
        value: localDefaultSongs,
      });
    }
  },

  computed: {
    ...mapState([
      "audioUrl",
      "audioEle",
      "audioId",
      "isPaused",
      "songName",
      "songerName",
      "picUrl",
      "singerId",
      "defaultSongList",
      "audioComment",
    ]),
  },

  methods: {
    ...mapMutations(["changeStateProperty", "addSongToDedefaultSongList"]),

    //监听音频是否可以播放
    canplay() {
      //播放音频
      this.audioEle.play();

      //将当前播放的歌曲添加到默认列表
      let songInfo = {
        //歌曲id
        songId: this.audioId,
        //歌曲音频url
        songUrl: this.audioUrl,
        //歌曲名称
        songName: this.songName,
        //歌手id
        singerId: this.singerId,
        //歌手名称
        singerName: this.songerName,
        //歌曲图片
        picUrl: this.picUrl,
        //歌曲评论数据
        audioComment: this.audioComment,
      };

      this.addSongToDedefaultSongList(songInfo);

      //存放在本地储存中
      localStorage.setItem(
        "defaultSongList",
        JSON.stringify(this.defaultSongList)
      );

      //获取歌词
      this.axios({
        method: "get",
        url: "/lyric",
        params: {
          id: this.audioId,
        },
      })
        .then((res) => {
          //处理歌词
          //解析歌词
          let lyricData = res.data.lrc.lyric.split(/\n/);

          //按照 ]切割
          let data = [];
          lyricData.forEach((v) => {
            let ly = v.split(/\]/);
            ly[0] = ly[0].slice(1);

            if (ly[1]) {
              ly[1] = ly[1].trim();
              //处理ly[0], 转换为秒
              //按照 : 进行切割, 分成 分钟 和 秒
              let time = ly[0].split(/:/);

              let minutes = Number(time[0]);
              let seconds = Number(time[1]);

              let t = (minutes * 60 + seconds).toFixed(2);

              data.push({ time: Number(t), text: ly[1] });
            }
          });

          this.lyric = data;
        })
        .catch((err) => {
          
        });
    },

    //监听音频是否播放结束
    ended() {
      this.currentTime = 0;
    },

    //当音频进度发生改变时
    timeupdate() {
      //获取当前播放时间
      this.currentTime = this.audioEle.currentTime;
    },
  },
};
</script>


<style lang="less">
body {
  background-color: #f5f5f5;
}

//定义转盘动画
@keyframes r {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.rotate {
  animation: r 10s linear 0s infinite normal paused;
}
</style>
